<template>
  <view class="container">
<!--    <web-view :src="webViewSrc" :fullscreen="false" :style="webviewStyles" @message="onMessage"></web-view>-->
    <u-alert-tips  type="primary" description="复制链接到浏览器查看作品"
                   style="margin-top: 10px"></u-alert-tips>
    <view style="margin-top: 10px">
      <u-button type="primary" @click="showTrends" >
        复制链接
    </u-button>
    </view>


    <view
        style="margin-top:10px;border:1px solid #000000;padding: 10px;margin-bottom: 40px;border-radius: 20px 20px 20px 20px;box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);">
      <u-form :model="videoData" ref="uForm" label-width="100px">
        <view style="display: flex">
          <view>
            <u-form-item label="是否置顶">{{ getYesOrNoMapByValue(videoData.is_top) }}</u-form-item>
            <u-form-item label="是否审核通过">{{ getYesOrNoMapByValue(videoData.is_reviewed) }}</u-form-item>
            <u-form-item label="评论数">{{ videoData.statistics.comment_count }}</u-form-item>
            <u-form-item label="点赞数">{{ videoData.statistics.digg_count }}</u-form-item>
          </view>
          <view style="margin-left: 30px">
            <u-form-item label="下载数">{{ videoData.statistics.download_count }}</u-form-item>
            <u-form-item label="转发数">{{ videoData.statistics.forward_count }}</u-form-item>
            <u-form-item label="播放数">{{ videoData.statistics.play_count }}</u-form-item>
            <u-form-item label="分享数">{{ videoData.statistics.share_count }}</u-form-item>
          </view>
        </view>


      </u-form>
    </view>

    <view style="height: 10px"></view>
  </view>
</template>


<script>
const API = require('../../../utils/api/douyin.js').default;
const $ = require('../../../utils/api.js');
const yesOrNoMap = {
  true: '是',
  false: '否',
};
export default {
  data() {
    return {
      webviewStyles: {
        progress: false,
        height: "97%",
        width: "100%",
      },
      videoData: {},
      webViewSrc: ''
    };
  },

  components: {},
  props: {},
  onLoad(option) {
    this.videoData = JSON.parse(decodeURIComponent(option.videoData))
    this.webViewSrc = option.share_url
    // this.getVideoIframe()
  },

  created() {

  },
  methods: {
    showTrends(){
      this.copy(this.webViewSrc)
    },
    onMessage(e) {
      // 监听网页发送过来的样式指令，然后处理
      const data = e.detail.data;
      if (data === 'changeStyle') {
        console.log("aaa",data)
        // 这里可以调用uni的API来修改web-view外围容器的样式，或者通过其他方式改变
      }
    },

    getYesOrNoMapByValue(value) {
      return yesOrNoMap[value] || '未知状态'; // 如果值不存在，返回'未知状态'
    },
    getVideoIframe() {
      const self = this;
      $.ajax({
        url: API.getIframeVideo,
        data: {
          "videoId": self.videoData.video_id,
        },
        method: 'GET',
        success(res) {
          self.webViewSrc = res.data.data.webViewSrc
        }
      });
    },

    onReachBottom() {

    },
    onPullDownRefresh() {

    },
  }
};
</script>

<style scoped lang="scss">
#mse{
  margin-left: 71px;
}
.container {
  padding: 15px;
  height: 100%;
}
</style>
